<template>
  <a-card bordered>
    <a-row style="margin-bottom: 2%;">
      <a-col span="24">
        <a-card>
          <span style="font-size: 16px;margin-right: 10px;"> 当前模式:</span>
          <a-space size="large">
            <a-radio-group v-model="configData" button-style="solid" @change="choseChange">
              <a-radio-button value="0">
                本地上传
              </a-radio-button>
              <a-radio-button value="1">
                阿里云OSS
              </a-radio-button>
              <a-radio-button value="2">
                华为云OBS
              </a-radio-button>
            </a-radio-group>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col span="8" style="padding: 15px;">
        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="img.localYun"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToLocalModal(false)" style="font-size: 20px;"
                      :spin="spin.local"
                      @mouseover="mouseOver(0)"
                      @mouseleave="mouseLeave(0)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToLocalModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="文件将直接上传至服务器">
            <template slot="title">
              本地上传
              <a-tag color="green" v-if="configData==0">
                运行
              </a-tag>
              <a-tag color="red" v-else>
                停止
              </a-tag>
            </template>
            <a-avatar
              slot="avatar"
              :src="img.localYun"
            />
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col span="8" style="padding: 15px;">
        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="img.aliYun"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToOssModal(false)" style="font-size: 20px;"
                      :spin="spin.oss"
                      @mouseover="mouseOver(1)"
                      @mouseleave="mouseLeave(1)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToOssModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                文档
              </template>
              <a-icon key="book" type="book" @click="jump(docUrl.aliOssDoc)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="文件将由阿里云OSS托管">
            <template slot="title">
              阿里云OSS
              <a-tag color="green" v-if="configData==1">
                运行
              </a-tag>
              <a-tag color="red" v-else>
                停止
              </a-tag>
            </template>
            <a-avatar
              slot="avatar"
              :src="img.aliYun"
            />
          </a-card-meta>
        </a-card>

      </a-col>
      <a-col span="8" style="padding: 15px;">
        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="img.huaweiYun"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" @click="goToObsModal(false)" style="font-size: 20px;"
                      :spin="spin.obs"
                      @mouseover="mouseOver(2)"
                      @mouseleave="mouseLeave(2)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" @click="goToObsModal(true)" style="font-size: 20px;"/>
            </a-tooltip>
          </template>
          <a-card-meta description="文件将由华为云OBS托管">
            <template slot="title">
              华为云OBS
              <a-tag color="green" v-if="configData==2">
                运行
              </a-tag>
              <a-tag color="red" v-else>
                停止
              </a-tag>
            </template>
            <a-avatar
              slot="avatar"
              :src="img.huaweiYun"
            />
          </a-card-meta>
        </a-card>

      </a-col>
    </a-row>

    <local-upload-modal ref="localRef"></local-upload-modal>
    <oss-upload-modal ref="ossRef"></oss-upload-modal>
    <obs-upload-modal ref="obsRef"></obs-upload-modal>
  </a-card>
</template>
<script>
import {getAction, putAction} from "@api/manage";
import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";
import alibaba from "../img/alibaba.jpg";
import huawei from "../img/huawei.jpg";
import local from "../img/local.jpg";
import {ConfigDictMixins} from "@views/gospel/configCenter/mixins/ConfigDictMixins";
import LocalUploadModal from "@views/gospel/configCenter/storage/modules/LocalUploadModal";
import OssUploadModal from "@views/gospel/configCenter/storage/modules/OssUploadModal";
import ObsUploadModal from "@views/gospel/configCenter/storage/modules/ObsUploadModal";
import {aliOssDoc} from "@views/gospel/configCenter/mixins/ConfigDoc";

export default {
  name: "FileUploadConfig",
  mixins: [BoneCommonMixin, ConfigDictMixins],
  components: {LocalUploadModal, OssUploadModal, ObsUploadModal},
  data() {
    return {
      description: "文件上传配置文件",
      routerUrl: "/config/center/storage/FileUploadConfig",
      img: {
        aliYun: alibaba,
        huaweiYun: huawei,
        localYun: local,
      },
      type: "uploadType",
      url: {
        switchType: "/config/storage/switchUpload",
      },
      docUrl: {
        aliOssDoc: aliOssDoc,
      },
      spin: {
        local: false,
        oss: false,
        obs: false,
      }
    }
  },
  created() {
    this.queryDict();
  },
  methods: {
    mouseOver: function (value) {
      switch (value) {
        case 0:
          this.spin.local = true;
          break;
        case 1:
          this.spin.oss = true;
          break;
        case 2:
          this.spin.obs = true;
          break;
      }
    },
    mouseLeave: function (value) {
      switch (value) {
        case 0:
          this.spin.local = false;
          break;
        case 1:
          this.spin.oss = false;
          break;
        case 2:
          this.spin.obs = false;
          break;
      }
    },

    goToLocalModal(value) {
      this.$refs.localRef.visible = true;
      this.$refs.localRef.disable = value;
      this.$refs.localRef.queryJsonDict();
    },
    goToOssModal(value) {
      this.$refs.ossRef.visible = true;
      this.$refs.ossRef.disable = value;
      this.$refs.ossRef.queryJsonDict();
    },
    goToObsModal(value) {
      this.$refs.obsRef.visible = true;
      this.$refs.obsRef.disable = value;
      this.$refs.obsRef.queryJsonDict();
    },
  }
}
</script>

<style scoped>

</style>